@import "../../both/mixin";

.user_video_comment.bln{

  @include cf(".comment_box_wr");
  .comment_box_wr{
    margin-bottom: 20px;
    margin-top : 20px;
  }

  .comment_box{
    padding: 10px 24px;

    img.head_img{
      height : 40px;
      width : 40px;
      border-radius: 50%;
      vertical-align: top;
    }

    .textarea_wr{

      width : 770px;
      height : 96px;
      display: inline-block;
      margin-left : 20px;
      color : #14191e;
      position: relative;
      padding : 15px 20px;

      .textarea_border{
        border : 1px solid #b7bbbf;
        border-radius: 2px;
        position: absolute;
        left : 0;
        right : 0;
        top : 0;
        bottom: 0;
        z-index : 0;
      }

      textarea#video_comment{
        border : 0;
        position: relative;
        outline: none;
        resize: none;
        width : 730px;
        height : 66px;
        z-index : 999;
        color : #555555;
      }

      textarea#video_comment:focus + .textarea_border{
        border : 1px solid #4D5559;
        box-shadow: 0 0 8px 0 rgba(0,0,0,.4);
      }

    }

  }

  .comment_tool_bar{
    height : 58px;
    background-color : #F3f5f7;

    @include cf("ul");
    ul{
      list-style: none;
      display: block;
      text-align: center;

      li{
        display: block;
        float : left;
        padding : 0 20px;
        line-height : 58px;
        height : 58px;
      }

      a{
        text-decoration: none;
        color : #787D82;
        font-size : 12px;

        &:hover,&.active{
          color : #14191e;
        }
      }
    }
  }

  .comment_submit{
    width : 80px;
    height : 40px;
    padding : 5px 10px;
    cursor: pointer;
    float:right;
    font-size : 14px;
    margin-right : 24px;
    background-color: #00B33B;
    color : white;
    line-height : 30px;
    text-align: center;
    border-radius: 2px;
    margin-top : 20px;

    &:hover{
      background-color : #33a646;
    }
  }
}